<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--[if IE 9]>         <html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">

        <title>AppUI - Web App Bootstrap Admin Template</title>

        <meta name="description" content="AppUI is a Web App Bootstrap Admin Template created by pixelcave and published on Themeforest">
        <meta name="author" content="pixelcave">
        <meta name="robots" content="noindex, nofollow">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <!-- Icons -->
        <!-- The following icons can be replaced with your own, they are used by desktop and mobile browsers -->
        <link rel="shortcut icon" href="img/favicon.png">
        <link rel="apple-touch-icon" href="img/icon57.png" sizes="57x57">
        <link rel="apple-touch-icon" href="img/icon72.png" sizes="72x72">
        <link rel="apple-touch-icon" href="img/icon76.png" sizes="76x76">
        <link rel="apple-touch-icon" href="img/icon114.png" sizes="114x114">
        <link rel="apple-touch-icon" href="img/icon120.png" sizes="120x120">
        <link rel="apple-touch-icon" href="img/icon144.png" sizes="144x144">
        <link rel="apple-touch-icon" href="img/icon152.png" sizes="152x152">
        <link rel="apple-touch-icon" href="img/icon180.png" sizes="180x180">
        <!-- END Icons -->

        <!-- Stylesheets -->
        <!-- Bootstrap is included in its original form, unaltered -->
        <link rel="stylesheet" href="css/bootstrap.min.css">

        <!-- Related styles of various icon packs and plugins -->
        <link rel="stylesheet" href="css/plugins.css">

        <!-- The main stylesheet of this template. All Bootstrap overwrites are defined in here -->
        <link rel="stylesheet" href="css/main.css">

        <!-- Include a specific file here from css/themes/ folder to alter the default theme of the template -->

        <!-- The themes stylesheet of this template (for using specific theme color in individual elements - must included last) -->
        <link rel="stylesheet" href="css/themes.css">
        <!-- END Stylesheets -->

        <!-- Modernizr (browser feature detection library) -->
        <script src="js/vendor/modernizr-3.3.1.min.js"></script>
    </head>
    <body>
        <!-- Page Wrapper -->
        <!-- In the PHP version you can set the following options from inc/config file -->
        <!--
            Available classes:

            'page-loading'      enables page preloader
        -->
        <div id="page-wrapper" class="page-loading">
            <!-- Preloader -->
            <!-- Preloader functionality (initialized in js/app.js) - pageLoading() -->
            <!-- Used only if page preloader enabled from inc/config (PHP version) or the class 'page-loading' is added in #page-wrapper element (HTML version) -->
            <div class="preloader">
                <div class="inner">
                    <!-- Animation spinner for all modern browsers -->
                    <div class="preloader-spinner themed-background hidden-lt-ie10"></div>

                    <!-- Text for IE9 -->
                    <h3 class="text-primary visible-lt-ie10"><strong>Loading..</strong></h3>
                </div>
            </div>
            <!-- END Preloader -->

            <!-- Page Container -->
            <!-- In the PHP version you can set the following options from inc/config file -->
            <!--
                Available #page-container classes:

                'sidebar-light'                                 for a light main sidebar (You can add it along with any other class)

                'sidebar-visible-lg-mini'                       main sidebar condensed - Mini Navigation (> 991px)
                'sidebar-visible-lg-full'                       main sidebar full - Full Navigation (> 991px)

                'sidebar-alt-visible-lg'                        alternative sidebar visible by default (> 991px) (You can add it along with any other class)

                'header-fixed-top'                              has to be added only if the class 'navbar-fixed-top' was added on header.navbar
                'header-fixed-bottom'                           has to be added only if the class 'navbar-fixed-bottom' was added on header.navbar

                'fixed-width'                                   for a fixed width layout (can only be used with a static header/main sidebar layout)

                'enable-cookies'                                enables cookies for remembering active color theme when changed from the sidebar links (You can add it along with any other class)
            -->
            <div id="page-container" class="header-fixed-top sidebar-visible-lg-full">
                <!--引入右侧设置栏-->
                <div th:replace="~{include/include::alternativeSidebar}"></div>

                <!--引入左侧侧边栏-->
                <div th:replace="~{include/include::#sidebar}"></div>

                <!-- Main Container -->
                <div id="main-container">
                    <!-- Header -->
                    <!-- In the PHP version you can set the following options from inc/config file -->
                    <!--
                        Available header.navbar classes:

                        'navbar-default'            for the default light header
                        'navbar-inverse'            for an alternative dark header

                        'navbar-fixed-top'          for a top fixed header (fixed main sidebar with scroll will be auto initialized, functionality can be found in js/app.js - handleSidebar())
                            'header-fixed-top'      has to be added on #page-container only if the class 'navbar-fixed-top' was added

                        'navbar-fixed-bottom'       for a bottom fixed header (fixed main sidebar with scroll will be auto initialized, functionality can be found in js/app.js - handleSidebar()))
                            'header-fixed-bottom'   has to be added on #page-container only if the class 'navbar-fixed-bottom' was added
                    -->
                    <!--引入头部-->
                    <div th:replace="~{include/include::headerbar}"></div>

                    <!-- Page content -->
                    <!--
                        Available classes when #page-content-sidebar is used:

                        'inner-sidebar-left'      for a left inner sidebar
                        'inner-sidebar-right'     for a right inner sidebar
                    -->
                    <div id="page-content" class="inner-sidebar-left">
                        <!-- Inner Sidebar -->
                        <div id="page-content-sidebar">
                            <!-- Collapsible Options -->
                            <a href="javascript:void(0)" class="btn btn-block btn-default visible-xs" data-toggle="collapse" data-target="#media-options">Media Box</a>
                            <div id="media-options" class="collapse navbar-collapse remove-padding">
                                <!-- Filter -->
                                <div class="block-section">
                                    <h4 class="inner-sidebar-header">
                                        <a href="javascript:void(0)" class="btn btn-xs btn-default pull-right"><i class="fa fa-plus"></i></a>
                                        Filter
                                    </h4>
                                    <!-- Filter by Type links -->
                                    <!-- Custom files functionality is initialized in js/pages/appMedia.js -->
                                    <!-- Add the category value you want each link in .media-filter to filter out in its data-category attribute. Add the value 'all' to show all items -->
                                    <ul class="nav nav-pills nav-stacked nav-icons media-filter">
                                        <li class="active">
                                            <a href="javascript:void(0)" data-category="all">
                                                <i class="fa fa-fw fa-folder text-primary icon-push"></i> <strong>新客户登记</strong>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)" data-category="video">
                                                <i class="fa fa-fw fa-folder text-danger icon-push"></i> <strong>客户信息查询 / 编辑</strong>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)" data-category="image">
                                                <i class="fa fa-fw fa-folder text-success icon-push"></i> <strong>客户订购信息查询</strong>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)" data-category="audio">
                                                <i class="fa fa-fw fa-folder text-info icon-push"></i> <strong>Audio</strong>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)" data-category="pdf">
                                                <i class="fa fa-fw fa-folder text-warning icon-push"></i> <strong>Pdf</strong>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)" data-category="zip">
                                                <i class="fa fa-fw fa-folder text-muted icon-push"></i> <strong>Zip</strong>
                                            </a>
                                        </li>
                                    </ul>
                                    <!-- END Filter by Type links -->
                                </div>
                                <!-- END Filter -->

                                <!-- Upload New File -->
                                <div class="block-section">
                                    <h4 class="inner-sidebar-header">Upload New File</h4>
                                    <form action="page_app_media.html" class="dropzone"></form>
                                </div>
                                <!-- END Upload New File -->
                            </div>
                            <!-- END Collapsible Options -->
                        </div>
                        <!-- END Inner Sidebar -->

                        <!-- Media Box Content -->
                        <!-- Add the category value for each item in its data-category attribute (for the filter functionality to work) -->
                        <div class="row media-filter-items">
                            <div class="col-sm-4 col-lg-3">
                                <div class="media-items animation-fadeInQuick2" data-category="zip">
                                    <div class="media-items-options text-right">
                                        <a href="javascript:void(0)" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                    <div class="media-items-content">
                                        <i class="fa fa-file-archive-o fa-5x text-muted"></i>
                                    </div>
                                    <h4>
                                        <strong>Project</strong>.zip<br>
                                        <small>3 hours ago, 3.2MB</small>
                                    </h4>
                                </div>
                            </div>
                            <div class="col-sm-4 col-lg-3">
                                <div class="media-items animation-fadeInQuick2" data-category="image">
                                    <div class="media-items-options text-right">
                                        <a href="img/placeholders/photos/photo1.jpg" class="btn btn-xs btn-info" data-toggle="lightbox-image">View</a>
                                        <a href="javascript:void(0)" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                    <div class="media-items-content">
                                        <i class="fa fa-file-picture-o fa-5x text-success"></i>
                                    </div>
                                    <h4>
                                        <strong>Mountains</strong>.jpg<br>
                                        <small>4 hours ago, 7.5MB</small>
                                    </h4>
                                </div>
                            </div>
                            <div class="col-sm-4 col-lg-3">
                                <div class="media-items animation-fadeInQuick2" data-category="video">
                                    <div class="media-items-options text-right">
                                        <a href="javascript:void(0)" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                    <div class="media-items-content">
                                        <i class="fa fa-file-video-o fa-5x text-danger"></i>
                                    </div>
                                    <h4>
                                        <strong>Trip</strong>.mov<br>
                                        <small>7 hours ago, 120MB</small>
                                    </h4>
                                </div>
                            </div>
                            <div class="col-sm-4 col-lg-3">
                                <div class="media-items animation-fadeInQuick2" data-category="image">
                                    <div class="media-items-options text-right">
                                        <a href="img/placeholders/photos/photo2.jpg" class="btn btn-xs btn-info" data-toggle="lightbox-image">View</a>
                                        <a href="javascript:void(0)" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                    <div class="media-items-content">
                                        <i class="fa fa-file-picture-o fa-5x text-success"></i>
                                    </div>
                                    <h4>
                                        <strong>Pizza</strong>.jpg<br>
                                        <small>8 hours ago, 3.9MB</small>
                                    </h4>
                                </div>
                            </div>
                            <div class="col-sm-4 col-lg-3">
                                <div class="media-items animation-fadeInQuick2" data-category="zip">
                                    <div class="media-items-options text-right">
                                        <a href="javascript:void(0)" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                    <div class="media-items-content">
                                        <i class="fa fa-file-archive-o fa-5x text-muted"></i>
                                    </div>
                                    <h4>
                                        <strong>Freebies</strong>.zip<br>
                                        <small>9 hours ago, 56.2MB</small>
                                    </h4>
                                </div>
                            </div>
                            <div class="col-sm-4 col-lg-3">
                                <div class="media-items animation-fadeInQuick2" data-category="audio">
                                    <div class="media-items-options text-right">
                                        <a href="javascript:void(0)" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                    <div class="media-items-content">
                                        <i class="fa fa-file-audio-o fa-5x text-info"></i>
                                    </div>
                                    <h4>
                                        <strong>Classical</strong>.mp3<br>
                                        <small>11 hours ago, 3.3MB</small>
                                    </h4>
                                </div>
                            </div>
                            <div class="col-sm-4 col-lg-3">
                                <div class="media-items animation-fadeInQuick2" data-category="image">
                                    <div class="media-items-options text-right">
                                        <a href="img/placeholders/photos/photo7.jpg" class="btn btn-xs btn-info" data-toggle="lightbox-image">View</a>
                                        <a href="javascript:void(0)" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                    <div class="media-items-content">
                                        <i class="fa fa-file-picture-o fa-5x text-success"></i>
                                    </div>
                                    <h4>
                                        <strong>Road</strong>.jpg<br>
                                        <small>12 hours ago, 4.4MB</small>
                                    </h4>
                                </div>
                            </div>
                            <div class="col-sm-4 col-lg-3">
                                <div class="media-items animation-fadeInQuick2" data-category="zip">
                                    <div class="media-items-options text-right">
                                        <a href="javascript:void(0)" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                    <div class="media-items-content">
                                        <i class="fa fa-file-archive-o fa-5x text-muted"></i>
                                    </div>
                                    <h4>
                                        <strong>FileArchive</strong>.zip<br>
                                        <small>1 day ago, 530MB</small>
                                    </h4>
                                </div>
                            </div>
                            <div class="col-sm-4 col-lg-3">
                                <div class="media-items animation-fadeInQuick2" data-category="image">
                                    <div class="media-items-options text-right">
                                        <a href="img/placeholders/photos/photo3.jpg" class="btn btn-xs btn-info" data-toggle="lightbox-image">View</a>
                                        <a href="javascript:void(0)" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                    <div class="media-items-content">
                                        <i class="fa fa-file-picture-o fa-5x text-success"></i>
                                    </div>
                                    <h4>
                                        <strong>Nature</strong>.jpg<br>
                                        <small>1 day ago, 6.2MB</small>
                                    </h4>
                                </div>
                            </div>
                            <div class="col-sm-4 col-lg-3">
                                <div class="media-items animation-fadeInQuick2" data-category="video">
                                    <div class="media-items-options text-right">
                                        <a href="javascript:void(0)" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                    <div class="media-items-content">
                                        <i class="fa fa-file-video-o fa-5x text-danger"></i>
                                    </div>
                                    <h4>
                                        <strong>Rollercoaster</strong>.mov<br>
                                        <small>2 days ago, 260MB</small>
                                    </h4>
                                </div>
                            </div>
                            <div class="col-sm-4 col-lg-3">
                                <div class="media-items animation-fadeInQuick2" data-category="video">
                                    <div class="media-items-options text-right">
                                        <a href="javascript:void(0)" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                    <div class="media-items-content">
                                        <i class="fa fa-file-video-o fa-5x text-danger"></i>
                                    </div>
                                    <h4>
                                        <strong>Sunset</strong>.mov<br>
                                        <small>3 days ago, 76.9MB</small>
                                    </h4>
                                </div>
                            </div>
                            <div class="col-sm-4 col-lg-3">
                                <div class="media-items animation-fadeInQuick2" data-category="pdf">
                                    <div class="media-items-options text-right">
                                        <a href="javascript:void(0)" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                    <div class="media-items-content">
                                        <i class="fa fa-file-pdf-o fa-5x text-warning"></i>
                                    </div>
                                    <h4>
                                        <strong>Guide</strong>.pdf<br>
                                        <small>4 days ago, 7.3MB</small>
                                    </h4>
                                </div>
                            </div>
                            <div class="col-sm-4 col-lg-3">
                                <div class="media-items animation-fadeInQuick2" data-category="audio">
                                    <div class="media-items-options text-right">
                                        <a href="javascript:void(0)" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                    <div class="media-items-content">
                                        <i class="fa fa-file-audio-o fa-5x text-info"></i>
                                    </div>
                                    <h4>
                                        <strong>Soundtrack</strong>.mp3<br>
                                        <small>1 week ago</small>
                                    </h4>
                                </div>
                            </div>
                            <div class="col-sm-4 col-lg-3">
                                <div class="media-items animation-fadeInQuick2" data-category="pdf">
                                    <div class="media-items-options text-right">
                                        <a href="javascript:void(0)" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                    <div class="media-items-content">
                                        <i class="fa fa-file-pdf-o fa-5x text-warning"></i>
                                    </div>
                                    <h4>
                                        <strong>Tutorial</strong>.pdf<br>
                                        <small>2 weeks ago, 9.1MB</small>
                                    </h4>
                                </div>
                            </div>
                            <div class="col-sm-4 col-lg-3">
                                <div class="media-items animation-fadeInQuick2" data-category="audio">
                                    <div class="media-items-options text-right">
                                        <a href="javascript:void(0)" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                    <div class="media-items-content">
                                        <i class="fa fa-file-audio-o fa-5x text-info"></i>
                                    </div>
                                    <h4>
                                        <strong>Effect</strong>.wav<br>
                                        <small>3 weeks ago, 250KB</small>
                                    </h4>
                                </div>
                            </div>
                            <div class="col-sm-4 col-lg-3">
                                <div class="media-items animation-fadeInQuick2" data-category="zip">
                                    <div class="media-items-options text-right">
                                        <a href="javascript:void(0)" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                    <div class="media-items-content">
                                        <i class="fa fa-file-archive-o fa-5x text-muted"></i>
                                    </div>
                                    <h4>
                                        <strong>Backup</strong>.zip<br>
                                        <small>3 weeks ago, 14.9MB</small>
                                    </h4>
                                </div>
                            </div>
                        </div>
                        <!-- END Media Box Content -->
                    </div>
                    <!-- END Page Content -->
                </div>
                <!-- END Main Container -->
            </div>
            <!-- END Page Container -->
        </div>
        <!-- END Page Wrapper -->

        <!-- jQuery, Bootstrap, jQuery plugins and Custom JS code -->
        <script src="js/vendor/jquery-2.2.4.min.js"></script>
        <script src="js/vendor/bootstrap.min.js"></script>
        <script src="js/plugins.js"></script>
        <script src="js/app.js"></script>

        <!-- Load and execute javascript code used only in this page -->
        <script src="js/pages/appMedia.js"></script>
        <script>$(function(){ AppMedia.init(); });</script>
    </body>
</html>